<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>书写文字</title>
    </head>
    <style>
        html,
        body {
            margin: 0;
        }

        #canvas {
            display: block;
            margin: auto;
            border: 1px solid #999;
        }
    </style>
    <body>
        <canvas id="canvas" width="800" height="800"></canvas>
    </body>
    <script type="module">
        import {Create} from '../dist/main.js';

        const canvas = new Create('canvas', {
            // background: '#fff8e1'
            background: '#fff'
        });
        const ctx = canvas.ctx;

        // 创建文字
        function createText() {
            canvas.drawText('财', 400, 400, {
                fontSize: '400px',
                // color: '#da4026'
                color: 'gold'
            });
        }

        function createLine() {
            canvas.drawLine({x: 400, y: 0}, {x: 400, y: 800}, {color: '#999'});
            canvas.drawLine({x: 0, y: 400}, {x: 800, y: 400}, {color: '#999'});
            canvas.drawLine(
                {x: 0, y: 0},
                {x: 800, y: 800},
                {
                    color: '#999',
                    isLineDash: true
                }
            );
            canvas.drawLine(
                {x: 800, y: 0},
                {x: 0, y: 800},
                {
                    color: '#999',
                    isLineDash: true
                }
            );
        }

        // 实现虚线跑马灯
        function createAntLine() {
            canvas.clearRect(0, 0, 800, 800);
            createLine();
            createText();

            requestAnimationFrame(createAntLine);
        }
        requestAnimationFrame(createAntLine);
    </script>
</html>
